[자바스크립트] 방문자의 로컬 타임존과 UTC 시간은 어떻게 구할까

웹사이트에서 날짜와 시간은 많은 곳에서 사용되죠. 자바스크립트를 사용하여 현재 로컬에 해당하는 타임존(Local Timezone)과 UTC 시간 값을 구하는 방법을 간략하게 정리한 내용입니다. 비교적 편하게 쉽게 읽을 수 있도록 적어보았습니다 :)

[ 목차 ]
하나. 로컬 Timezone 알아내기
둘. UTC Time 값 알아내기

! 위 값들을 계산하기에 앞서서 자바스크립트의 시간과 날짜 생각해보기

때때로 현재 시간을 계산할 필요가 있습니다. 이때 자바스크립트는 날짜와 시간을 계산하기 위해서 Date API를 제공합니다. new Date()를 사용하면 현재 날짜와 시간을 구하기 어렵지 않습니다.

? 그런데 다양한 포맷과 시, 분, 초 등등을 계산하여야 한다면?
만약 날짜나 시간 값을 얻는 데 있어 순서나 표기 방식 등 여러 포맷의 값을 얻어야 한다면 생각보다 간단하지 않습니다. 그래서 날짜 관련된 라이브러리를 대부분 많이 사용합니다. 가장 잘 알려진 moment.js 역시 빼놓을 수 없겠습니다. 그럼에도 불구하고 Pure Javascript를 사용하는 방법을 어느 정도라도 이해하는 부분은 필요하겠습니다.

! 로컬 타임존 얻는 방법, Local Timezone

다시 돌아와서 아래는 로컬 타임존(내가 속한 지역의 시간)을 특별한 라이브러리 없이 구하는 방법을 알아보려고 합니다. 즉, 내가 위치한 로컬이 어느 타임존에 속하는지를 반환하는 방법입니다. 예를들어 서울과 미국은 서로 다른 타임존에 속하기 때문에 시간이 차이가 나게 되겠죠. 물론 나라 뿐만 아니라 어느 도시에 있느냐 역시 시차가 다를 수도 있습니다.

자바스크립트에서 Timezone의 값은 아래와 같은 방법으로 확인이 가능합니다. 최근의 브라우저에서 모두 지원하는 방법입니다.

결과를 보니 'Asia/Seoul'이라고 나오는 군요 ~ 이처럼 현재 로컬의 타임존을 쉽게 얻을 수 있습니다. 다음으로 UTC 타임을 구하는 방법입니다.

! UTC 시간 구하는 방법

시간의 경우 UTC 타임을 필요로 할 수 있는데요 ~ 여기서 UTC(Coordinated Universal Time)시간은 현재 시간에 +, - 값을 사용하여 표기되는 시간으로 협정 표기시를 말합니다. 예를들어 한국의 경우 +0900의 시간 뒤에 표시되는 것이 특징입니다.

[ 참고하기 ]
UTC와 함께 GMT가 많이 비교되는데 GMT(Greenwich Mean Time)는 타임존으로 구분되는 시간이라는 점이 표준시인 UTC와 차이점입니다. 용어적 차이는 있지만 이 둘의 시간 차이는 없으며 동일합니다.

이와 같이 시간이 차이는 다국어를 지원하는 웹로컬라이제이션 환경의 웹사이트에서 특히 필요합니다. 만약 여러나라에서 같은 시간인 동시에 특정 페이지를 오픈하거나 이벤트를 시작한다고 가정할 때 UTC처럼 기준이 되는 시간을 사용할 수 있습니다.

그럼 타임존(Timezone)을 구하는 방법을 알아봅니다.입니다. 타임존은 Date 객체의 getTimezoneOffset() 프로퍼티를 사용하여 구할 수 있습니다.아래의 코드는 타임존을 얻어낸 예제 코드입니다.

위에서 첫 번째 timezone의 값은 -540을 보여줍니다. 단위는 분이며 이를 60으로 나눌 경우 -9 값이 나타나게 됩니다. 즉 9시간만큼 차이가 나며 UTC 시간보다 9 시간이 더 빠르다고 이해할 수 있습니다.

참고로 현재 날짜와 시간 값을 얻으면 아래와 같이 GMT 값이 표기됩니다.

이때 GMT시간을 같이 표기해주는 것을 알 수 있습니다. GMT +0900은 UTC보다 9시간이 빠른 한국 표준시(KST)를 말합니다.